define([
    'jquery',
    'underscore',
    'backbone',
    'models/message',
    'collections/messages',
    'views/message/item',
    'text!templates/message/friend-message-details.html',
    'iscroll'
], function ($, _, Backbone,MessageModel,MessageCollection,MessageListItemView,template) {
     var ThreadMessageDetailView = Backbone.View.extend({

         tagName:"div", // Not required since 'div' is the default if no el or tagName specified
         template : _.template(template),
         initialize:function () {

             /*this.template = _.template(tpl.get('message/message-details'));*/
             /*this.model.bind("change", this.render, this);*/
         },

         render:function (eventName) {
             $(this.el).html(this.template(this.model.toJSON()));
             return this;
         },

         events:{
             //"change input":"change",
              "click .send-btn":"sendMessage"
             // "click .delete":"deleteThreadMessage"
         },

         change:function (event) {
             var target = event.target;
             console.log('changing ' + target.id + ' from: ' + target.defaultValue + ' to: ' + target.value);
             // You could change your model on the spot, like this:
             // var change = {};
             // change[target.name] = target.value;
             // this.model.set(change);
         },
         sendMessage:function(){
             if($('#message-body').val()=='') return false;
             var messageModel=new MessageModel;
             var MessagesClt = new MessageCollection;
             messageModel.set({
                 message:$('#message-body').val(),
                 thread_id:this.model.id
             });

             MessagesClt.create(messageModel, {
                 success:function () {
                     $('#message-body').val("");
                     $("#message-inner-list").append(new MessageListItemView({model:messageModel}).render().el);
                     app.threadMessageList=false;
                     app.threadMessage();
                     //$("#message-"+pri_id).trigger('click');
                     //app.messageDetails(pri_id);
                     //app.navigate('thread/'+);
                 }
             });
//             $.ajax({
//                 type: "POST",
//                 url: "api/message",
//                 data: { message:$("#message-body").val(),thread:this.model.id }
//             }).done(function( data ) {
//                     alert( "Data Saved: " + data );
//             });
         },

        /* renderService:function (serivice){
             var serviceView = new ServiceListView({model: serivice});
             this.$('div.service-list').append($(serviceView.render()));
         },*/

         /*saveThreadMessage:function () {
          this.model.set({
          name:$('#name').val(),
          grapes:$('#grapes').val(),
          country:$('#country').val(),
          region:$('#region').val(),
          year:$('#year').val(),
          description:$('#description').val()
          });
          if (this.model.isNew()) {
          var self = this;
          app.messageList.create(this.model, {
          success:function () {
          app.navigate('api/message/' + self.model.id, false);
          }
          });
          } else {
          this.model.save();
          }

          return false;
          },*/

         scrollRender:function(){
             this.scrollNav = new iScroll('navWrapper');
             this.scrollContent = new iScroll('contentWrapper');
         },

         deleteThreadMessage:function () {
             this.model.destroy({
                 success:function () {
                     alert('ThreadMessage deleted successfully');
                     window.history.back();
                 }
             });
             return false;
         }

     });
    return ThreadMessageDetailView
});

